import React from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  message,
  Upload,
  Modal,
  List,
  Switch,
  notification,
  Avatar,
  Popconfirm,
  Cascader,
  InputNumber,
  AutoComplete,
} from 'antd';

import { StyleSheet, css } from 'aphrodite';

import { swap } from 'react-magic';
import styles from './vip.less';
import moment from 'moment/moment';
import { getValueWithLocalStorage } from '@/utils/authority';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const { MonthPicker, RangePicker } = DatePicker;
const { Meta } = Card;

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const styles_animation = StyleSheet.create({
  magic: {
    animationName: swap,
    animationDuration: '1s',
  },
});

import { connect } from 'dva';

const namespace = 'vip';

const userInfo = getValueWithLocalStorage('userinfo');

import router from 'umi/router';
import NumberInfo from "../../components/NumberInfo";

const mapStateToProps = state => {
  const ret = state[namespace].ret;
  const isLoading = state[namespace].isLoading;

  return {
    ret,
    isLoading,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addVipCard: (para, _owner, callback) => {
      const action = {
        type: `${namespace}/addVipCard`,
        payload: {
          ...para,
          callback: callback,
          owner: _owner,
        },
      };
      dispatch(action);
    },

    queryContacts: (_key,_owner, callback) => {
      const action = {
        type: `${namespace}/queryContacts`,
        payload: {
          callback: callback,
          owner: _owner,
          key:_key,
        },
      };
      dispatch(action);
    },



  };
};
@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class AddVipCard extends React.Component {
  constructor(props) {
    super(props);
    var isNew =  this.props.location.query.id == undefined
    this.state = {
      _id: isNew ? '' : this.props.location.query.id,
      title: '',
      mask: '',
      circle: '0',
      price: '0',
      isforever: false,
      isNew: isNew,
      value: '',
      num: 0,
      searchedContacts: [],
      key: this.props.location.query.key  == '' ? undefined:this.props.location.query.key,
      currentContact: undefined,
      shopTel:this.props.location.query.shop  == undefined ? userInfo.tel:this.props.location.query.shop,
    }
    ;
  }

  /*****************************model's callback********************************/

  addCallback = res => {
    if (res.code == 0) {
      message.error(res.msg);
    } else {
      message.success(res.msg);
      router.push(userInfo == null ?'/vip-client/servicesTemplate':  '/vip/servicesTemplate');
    }
  };

  componentDidMount = () => {

  };

  render() {
    var that = this;
    const NUM_TITLE = 20;
    const userInfo = getValueWithLocalStorage('userinfo');
    return (
      <Card title={that.state.isNew ? '新增会员' : '编辑会员'} bordered={false}>
        <Row className={styles.row} gutter={10}>
          <Col span={24}>
            <AutoComplete
              className={styles["global-search"]}
              size="large"
              style={{ width: '100%' }}
              dataSource={that.state.searchedContacts.map(item=>{
                return item.name+' '+item.tel+' '+item.carcode
              })}
              onSelect={value=>{
                for(var i=0;i<that.state.searchedContacts.length;i++){
                    var item = that.state.searchedContacts[i]
                  if(value == item.name+' '+item.tel+' '+item.carcode){
                      that.setState({currentContact:item})
                      break
                  }
                }
              }}
              defaultValue={that.state.key}
              onSearch={value=>{
                that.setState({key:value})
              }}
              placeholder="输入客户名、号码、车牌号选择客户开卡"
              optionLabelProp="text"
            >
              <Input
                suffix={(
                  <Button
                          size="small"
                          type="primary"
                          onClick={()=>{
                            if(that.state.key.length == 0){
                              message.error('搜索内容不能为空')
                              return
                            }
                            that.props.queryContacts(that.state.key,that.state.shopTel,res=>{
                              that.setState({searchedContacts:res})
                            })
                          }}
                  >
                    <Icon type="search" />
                  </Button>
                )}
              />
            </AutoComplete>
          </Col>
        </Row>
        <Row className={styles.row} gutter={10}>
          <Col span={8}>
            <span className={styles.tipLab}>已选客户</span>
          </Col>
          <Col span={16}>
          <Input
            disabled = {true}
            value={that.state.currentContact == undefined ?"":that.state.currentContact.tel+" "+that.state.currentContact.carcode}
          />
          </Col>
        </Row>
        <Row className={styles.row} gutter={10}>
          <Col span={8}>
            <span className={styles.tipLab}>有效期(天)</span>
          </Col>
          <Col span={16}>
            <InputNumber
              defaultValue={that.state.circle}
              onChange={e => {
                that.setState({ circle: e});
              }}
            />
          </Col>
        </Row>

        <Row className={styles.row} gutter={10}>
          <Col span={8}>
            <span className={styles.tipLab}>长期卡</span>
          </Col>
          <Col span={16}>
            <Switch defaultChecked={that.state.isforever} onChange={value=>{
                that.setState({isforever:value})
            }} />
          </Col>
        </Row>

        <Row className={styles.row} gutter={48}>
          <Col offset={3} span={18}>
            <Button
              type="primary"
              block
              onClick={() => {

                if (that.state.isNew) {
                  that.props.addVipCard(
                    {
                      cardId:that.state.currentContact._id,
                      carder:that.state.currentContact._id,
                      cardNumber:that.state.currentContact.tel,
                    },
                    that.state.shopTel, res=>{
                    if (res.code == 0) {
                      message.error(res.msg);
                    } else {
                      message.success(res.msg);
                      router.goBack()
                      // router.push(userInfo==null ?'/vip-client/list':'/vip/list');
                    }
                  });
                } else {

                }
              }}
            >
              {that.state.isNew ? '确认开卡' : '确认编辑'}
            </Button>
          </Col>
        </Row>
      </Card>
    );
  }
}
